<template>
  <div class="xtx-steps">
    <slot></slot>

    <div v-for="(item, index) in dynamicSteps"
         :key="index"
         :class="{active: index < activeIndex}"
         class="xtx-steps-item">
      <div :class="{ firstItem: index === 0 }" class="step"><span>{{ index + 1 }}</span></div>
      <div class="title">{{ item.props.title }}</div>
      <div class="desc">{{ item.props.desc }}</div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'XtxSteps',
  props: {
    activeIndex: {
      type: Number,
      default: 1
    }
  },
  setup(props, {
    emits,
    slots
  }) {
    // 1.获取默认插槽的节点
    // 2.获取所有的动态生成的XtxStepsItem组件节点
    // 3.根据动态节点生成item
    // 4.插入大容器中

    // 获取默认插槽内容 steps是一个数组
    const steps = slots.default()
    const dynamicSteps = ref([])

    steps.forEach((item) => {
      if (item.type === 'XtxStepsItem') {
        // 静态
        dynamicSteps.value.push(item)
        // why? 为什么有的type : 'XtxStepsItem', 有的 type: {name: 'XtxTabsPanel', props: {},...}
      } else if (item.type && item.type.name === 'XtxStepsItem') {
        // 静态
        dynamicSteps.value.push(item)
      } else {
        // v-for指令动态生成的
        dynamicSteps.value.push(...item.children)
      }
    })

    return {
      dynamicSteps
    }
  }
}
</script>

<style lang="less" scoped>
.xtx-steps {
  display: flex;
  padding: 20px;
  text-align: center;

  .xtx-steps-item {
    // 所有弹性盒子平均等分弹性容器的宽度/高度, 实现每个盒子宽度一样
    flex: 1;

    &:first-child {
      .step {
        &::before {
          display: none;
        }
      }
    }

    &:last-child {
      .step {
        &::after {
          display: none;
        }
      }
    }

    &.active {
      .step {
        > span {
          border-color: @xtxColor;
          background: @xtxColor;
          color: #fff;
        }

        &::before, &::after {
          background: @xtxColor;
        }
      }

      .title {
        color: @xtxColor;
      }
    }

    .step {
      // 与谁形成子绝父相?
      position: relative;

      > span {
        position: relative;
        z-index: 1;
        display: inline-block;
        width: 48px;
        height: 48px;
        line-height: 44px;

        color: #ccc;
        font-size: 28px;
        // z-index + bg: #fff, 实现将把span元素压在before after两个伪元素上面,
        // 遮挡伪元素多出来的线
        background: #fff;
        border: 2px solid #e4e4e4;
        border-radius: 50%;
      }

      &::before, &::after {
        content: '';
        position: absolute;
        // 设置top为 24px 原因: 等于step高度的一半
        top: 24px;
        width: 50%;
        height: 2px;
        background-color: #e4e4e4;
      }

      &::before {
        left: 0;
      }

      &::after {
        right: 0;
      }

      &.firstItem {
        &::before {
          display: none;
        }
      }
    }

    .title {
      padding-top: 12px;
      color: #666;
    }

    .desc {
      padding-top: 6px;
      font-size: 12px;
      color: #999;
    }
  }
}
</style>
